<template>
	<div class="album-add">
		<nav-header>
			<template slot="menuBefore">
				<li>
					<router-link to="/resources/resource/album-management" tag="a">专辑列表</router-link>
				</li>
				<li class="gap">&gt;</li>
			</template>
		</nav-header>
		<div class="content">
			<el-form :model="addForm" :rules="rules" ref="addForm" label-width="100px" class="add-form">
				<el-form-item label="封面图片">
					<poster class="poster" v-model="addForm.picture"></poster>
				</el-form-item>
				<el-form-item label="专辑名称" prop="name">
					<el-input v-model.trim="addForm.name" maxlength="20" placeholder="最多可输入20个字"></el-input>
				</el-form-item>
				<el-form-item label="主讲人" prop="create_id" >
					<el-select v-model="addForm.create_id" placeholder="请选择主讲人">
						<el-option v-for="item of speakers" :key="item.user_id" :label="item.user_name" :value="item.user_id"></el-option>
					</el-select>
				</el-form-item>
				<div class="r_typeClass" v-if="!$store.state.platformInformation">
				<!-- 学段 -->
					<el-form-item  label="学段" prop="study_section_id">
						<el-select v-model="addForm.study_section_id" filterable @change="relateChange($event,'study_section')" placeholder="学段">
							<template  v-for="(item ,inx) of orgLevel2">
								<el-option :label="item.name" :value="item.id"  :key="inx"></el-option>
							</template>
						</el-select>
					</el-form-item>
					<!--年级  -->
					<el-form-item label="年级" prop="grade_id">
						<el-select v-model="addForm.grade_id" filterable  @change="relateChange($event,'grade')" placeholder="请选择年级">
							<template  v-for="(item ,inx) of orgLevel3">
								<el-option :label="item.name" :value="item.id"  :key="inx"></el-option>
							</template>
						</el-select>
					</el-form-item>
					<!-- 科目 -->
					<el-form-item label="科目" prop="subject_id">
						<el-select v-model="addForm.subject_id" @change="relateChange($event,'subject')" filterable  placeholder="请选择科目">
							<template  v-for="(item ,inx) of orgSubject">
								<el-option :label="item.name" :value="item.id"  :key="inx"></el-option>
							</template>
						</el-select>
					</el-form-item>
				</div>
				<el-form-item label="关键字" class="keyword-row">
					<el-tag v-for="(tag, inx) in addForm.keyword" :key="inx" closable :disable-transitions="false" @close="delKeyword(tag)">{{ tag }}</el-tag>
					<el-input class="keyword" maxlength="6" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small" placeholder="6个字符" @keyup.enter.native="inputKeyword" @blur="inputKeyword"></el-input>
					<el-button v-show="addForm.keyword.length < 5" class="button-new-tag" size="small" @click="showInput">+</el-button>
				</el-form-item>
				<el-form-item label="专辑介绍">
					<el-input type="textarea" :rows="6" maxlength="200" show-word-limit resize="none" placeholder="请输入专辑介绍,不超200字" v-model="addForm.profile"></el-input>
				</el-form-item>
				<el-form-item label="课程目录">
					<catalog ref="catalog" v-model="addForm.sub_data" :postData="postData"></catalog>
				</el-form-item>
				<el-form-item label="权限公开">
					<el-radio-group v-model="addForm.authority">
						<el-radio :label="1">公开</el-radio>
						<el-radio :label="0">不公开</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="cancelForm">取消</el-button>
					<el-button type="primary" @click="submitForm('addForm')">确定</el-button>
					<!-- <el-button @click="resetForm('addForm')">重置</el-button> -->
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>
<script>
import poster from '@/components/common/cropper-image';
import catalog from './album-catalog';
export default {
	components: {
		poster,
		catalog
	},
	data() {
		return {
			speakers: [],
			addForm: {
				picture: '',
				name: '',
				create_id: '',
				keyword: [],
				profile: '',
				sub_data: [],
				authority: 1,
				role_type: 1,

				// 下面的参数有些是接口必传的，只是此版本页面已删除了对应的功能
				study_section_id: '',
				grade_id: '',
				subject_id: '',
				is_download: 1,
				curriculum: {},
				outline_name: '',
				outline_path: '',
				outline_filesize: '',
				apply_name: '',
				apply_path: '',
				apply_filesize: '',
				teaching_name: '',
				teaching_path: '',
				teaching_filesize: ''
			},
			rules: {
				name: [{ required: true, message: '请输入专辑名称', trigger: 'blur' }, { min: 1, max: 30, message: '长度在30个字符内', trigger: 'blur' }],
				create_id: [{ required: true, message: '请选择主讲人', trigger: 'change' }],
				study_section_id: [
					{ required: true, message: '请选择学段', trigger: 'change' }
				],
				grade_id: [
					{ required: true, message: '请选择年级', trigger: 'change' }
				],
				subject_id: [
					{ required: true, message: '请选择科目', trigger: 'change' }
				],
			},
			inputValue: '',
			inputVisible: false,
			orgLevel2:[], // 学段
			orgLevel3:[], // 年级
			orgSubject:[], // 科目
			orgLevel2Param:{ //获取学段参数
				level:2,
				pid:null,
				direction:'balance',
			},
			orgLevel3Param:{ //获取年纪参数
				level:3,
				pid:null,
				direction:'balance',
			},
			subjectParam:{ //获取科目,版本，参数
				type:2,
				org_id:null,
				status:1,
			},
		};
	},
	created() {
		this.getSpeakers();
		this.getOrgLevel2();
	},
	mounted() {},
	methods: {
		// 获取主讲人
		getSpeakers() {
			let success = data => {
				this.speakers = data.data;
			};
			this.$ajax.get('api/album/get_album_teacher', { params: { app_code: sessionStorage.getItem('CheckSchoolAppCode') }, func: { success: success } });
		},
		// +添加按钮
		showInput() {
			if (this.addForm.keyword.length >= 5) {
				this.$message.error('关键词最多设置5个');
				return;
			}
			this.inputVisible = true;
			this.$nextTick(() => {
				this.$refs.saveTagInput.$refs.input.focus();
			});
		},
		// 输入关键字
		inputKeyword() {
			let inputValue = this.inputValue;
			if (checkSpace(inputValue)) {
				this.addForm.keyword.push(inputValue);
			}
			this.inputVisible = false;
			this.inputValue = '';
		},
		// 删除关键字
		delKeyword(tag) {
			this.addForm.keyword.splice(this.addForm.keyword.indexOf(tag), 1);
		},
		cancelForm() { // 取消
				this.$router.push('/resources/resource/album-management');
		},
		// 表单验证
		submitForm(formName) {
			console.log(formName)
			this.$refs[formName].validate(valid => {
				if (valid) {
					//验证专辑名称和主讲人 是否为空
					// console.log(this.$refs)
					this.$refs.catalog.validateCatalog(); // 验证子组件部分：课程目录是否为空，并上传文件
				} else {
					// console.log('error submit!!');
					return false;
				}
			});
		},
		// 提交数据
		postData() {
			// console.log(111)
			let params = this.addForm;
			let success = res => {
				this.$message.success(res.msg);
				this.$router.push('/resources/resource/album-management');
			};
			let fail = res => {
				this.$message.error(res.msg);
			};
			this.$ajax.post('api/album/album', params, {
				func: { success: success, fail: fail }
			});
		},
		// 学校------------------------------
		relateChange(newVal,type){
				switch (type){
					case 'study_section':
						this.addForm.grade_id = null;
						this.addForm.subject_id = null;

						this.orgLevel3 = [];
						this.orgSubject = [];

						this.orgLevel3Param.pid = newVal;
						this.getOrgLevel3();
						break;
					case 'grade' :
						this.addForm.subject_id = null;

						this.orgSubject = [];

						this.subjectParam.org_id = newVal;
						this.getSubject();
						break;
					default: break;
				}
		},
		//获取学段
		getOrgLevel2(){
			if(this.$store.state.checkLevel){
				this.orgLevel2Param.app_code = sessionStorage.getItem('CheckSchoolAppCode')
			}
			let success = ( data=>{
				// console.log(data.data, '909090')
							this.orgLevel2 = data.data;
						
			})
			if(this.$store.state.checkLevel){
							this.$ajax.get('api/network/get_platform_org',{params: this.orgLevel2Param,func:{success:success}})
			}else{
							this.$ajax.get('api/org/org',{params: this.orgLevel2Param,func:{success:success}})
			}
		},
		//获取年级
			getOrgLevel3(){
				let success = ( data=>{
            		this.orgLevel3 = data.data;
            	})
        this.$ajax.get('api/org/org',{params: this.orgLevel3Param,func:{success:success}})
			},
			//获取科目
			getSubject(){

				let success = ( data=>{
            		this.orgSubject = data.data;
            	})
        this.$ajax.get('api/cate/subject',{params: this.subjectParam,func:{success:success}})
			},
	}
};

</script>
<style lang="scss">
.album-add {
	.add-form {
		width: 800px;
	}
	.poster {
		display: inline-block;
		width: 240px;
		height: 135px;
	}
	.keyword-row {
		.el-input {
			width: 160px;
		}
		.el-tag {
			margin-right: 5px;
		}
	}
	.r_typeClass{
 		>div{
 			display: inline-block;
 			vertical-align: top;
 			width: 303px;
 		}
 	}
}

</style>
